<template>
  <div class="login-container">
    <vue-particles
      color="#fff"
      :particle-opacity="0.7"
      :particles-number="60"
      shape-type="circle"
      :particle-size="4"
      lines-color="#fff"
      :lines-width="1"
      :line-linked="true"
      :line-opacity="0.4"
      :lines-distance="150"
      :move-speed="2"
      :hover-effect="true"
      hover-mode="grab"
      :click-effect="true"
      click-mode="push"
    >
    </vue-particles>
    <div class="login-block">
      <h2>羊毛猪BOSS总控平台</h2>
      <div class="login_box">
        <input type="text" class="user-name" required><label>用户名</label>
      </div>
      <div class="login_box">
        <input type="password" class="password" required="required"><label>密码</label>
      </div>
      <el-button v-waves type="primary" :loading="loading" :icon="loading?'el-icon-loading':''" @click="handleLogin">{{ loading?'登录中':'登录' }}</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleLogin() {
      this.loading = true
      const userNameDom = document.querySelector('.user-name')
      const passwordDom = document.querySelector('.password')
      const params = {
        loginName: userNameDom.value,
        password: passwordDom.value
      }
      this.$store.dispatch('user/login', params).then(() => {
        this.$router.push('/').catch(() => {})
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
.login-container{
  width: 100%;
  height: 100vh;
  //background-color: #2c3e50;
  background: url("../../assets/img/login-bgi.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  ::v-deep.el-button{
    width: 220px;
  }
  .login-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 460px;
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    h2 {
      color: #fff;
      margin-bottom: 30px;
    }
    .login_box {
      position: relative;
      width: 100%;
      input {
        outline: none;
        border: none;
        width: 100%;
        padding: 10px 0;
        margin-bottom: 30px;
        color: #fff;
        font-size: 16px;
        border-bottom: 1px solid #99a9bf;
        background-color: transparent;
      }
      label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0;
        color: #fff;
        pointer-events: none;
        transition: all 0.5s;
      }
      input:focus + label,
      input:valid + label {
        top: -20px;
        color: #03e9f4;
        font-size: 14px;
      }
    }
  }
}
</style>
